<template>
	<view>
		<view class="toggleItem">
			<view class="toggleItemInhalt">
				<!-- <view class="optionId" :class="cardId==1?'Select':'Unchecked'" @click="$replaceTo('/ipo_list')">{{$t('subscribe.open')}}</view> -->
				<view class="optionId" :class="cardId==1?'Select':'Unchecked'" @click="$replaceTo('/')">{{$t('subscribe.open')}}</view>
				<view class="optionId" :class="cardId==2?'Select':'Unchecked'" @click="$replaceTo('/to_be_list')">{{$t('subscribe.to-be-list')}}</view>
				<view class="optionId" :class="cardId==3?'Select':'Unchecked'">{{$t('subscribe.orders')}}</view>
			</view>
		</view>
		<view class="toggleItem">
			<view class="toggleItemInhalt">
				<view class="optionId" :class="type==1?'Select':'Unchecked'" @click="selector(1)">{{$t('Active')}}</view>
				<view class="optionId" :class="type==2?'Select':'Unchecked'" @click="selector(2)">{{$t('Completed')}}</view>
				<view class="optionId" :class="type==3?'Select':'Unchecked'" @click="selector(3)">{{$t('Failed')}}</view>
			</view>
		</view>
		<view v-for="(item, index) in list" :key="index" class="TabOne">
			<view class="subscriptionCompany">
				<view class="subscriptionCompanyId" @tap="$navTo('/order_info',{order_id:item.id})">
					<view class="companyInformation">
						<!-- <view class="company">{{$t('company.xiaomi-tech')}}</view> -->
						<view class="company">{{$getLocaleField(item.gp_info, 'company_name')}}</view>
						<view class="information">
							<logo pattern="2" :text="item.gp_info.location"></logo>
							<view class="serialNumber">{{item.gp_symbol}}</view>
						</view>
					</view>
					<!-- <view class="subscriptionStatus">{{$t('subscribe_record.opening')}}</view> -->
					<view class="subscriptionStatus">{{$t(item.status_str)}}</view>
				</view>
				<view class="state" @tap="$navTo('/order_info',{order_id:item.id})">
					<view class="cardStatus">
						<view class="start">
							<!-- <view class="startTime_1"></view> -->
							<view class="stepsBar">
								<view class="steps" :class="item.status>=1?'active_2':'active_1'"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.btn-opening')}}</view>
							<view class="startSubscriptionTime">{{$timeToStr(item.gp_info.application_start_date_time)}}</view>
						</view>
						<view v-if="item.status > 0" class="start_conduct">
							<!-- <view class="startTime_2">10:00:00</view> -->
							<view class="submitSubmit">
								{{$t('subscribe_record.submitted')}}
								{{item.number}}{{$t('shares')}}
								{{$t('subscribe_record.Order')}}
							</view>
							<view class="date">{{$timeToStr(item.add_time)}}</view>
						</view>
						<view v-if="item.status < 0" class="start_conduct">
							<!-- <view class="startTime_2">10:00:00</view> -->
							<view class="submitSubmit">
								<text v-if="item.status == -1">{{$t('用户取消')}}</text>
								<text v-if="item.status == -2">{{$t('系统取消')}}</text>
							</view>
							<view class="date">{{$timeToStr(item.canceled_time)}}</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<!-- <view class="startTime_1">09:00:00</view> -->
							<view class="stepsBar">
								<view class="steps" :class="item.status>=2?'active_2':'active_1'"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-closing')}}</view>
							<view class="startSubscriptionTime">{{$timeToStr(item.gp_info.application_end_date_time)}}</view>
						</view>
						<view class="start_conduct">
							<view class="startTime_2"></view>
							<view class="submitSubmit"></view>
							<view class="date"></view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<!-- <view class="startTime_1">09:00:00</view> -->
							<view class="stepsBar">
								<view class="steps" :class="item.status>=3?'active_2':'active_1'"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.result-annc')}}</view>
							<view class="startSubscriptionTime">{{$timeToStr(item.gp_info.allotment_result_date)}}</view>
						</view>
						<view class="start_conduct">
							<!-- <view class="startTime_2"></view> -->
							<view class="submitSubmit">
								<block v-if="item.status>=3">
									<view v-if="item.zhong_status == 1">{{$t('已中签')}}<!-- 全部中签 -->{{item.zhong_num || 0}}{{$t('shares')}}</view>
									<view v-else-if="item.zhong_status == 2">{{$t('已中签')}}<!-- 部分中签 -->{{item.zhong_num || 0}}{{$t('shares')}}</view>
									<view v-else-if="item.zhong_status == 3">{{$t('未中签')}}</view>
									<view v-else-if="item.zhong_status == 4">{{$t('认购失败')}}</view>
								</block>
							</view>
							<view class="date"></view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<!-- <view class="startTime_1">09:00:00</view> -->
							<view class="stepsBar">
								<view class="steps" :class="item.status>=4?'active_2':'active_1'"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-listing')}}</view>
							<view class="startSubscriptionTime">{{$timeToStr(item.gp_info.listing_date)}}</view>
						</view>
					</view>
				</view>
				<view class="bott">
					<block v-if="type==1 && item.status == 1">
						<!-- <wzh-btn pattern="8" :text="$t('subscribe_record.subscribe-now')"></wzh-btn> -->
						<wzh-btn pattern="8" :text="$t('Modify')" @invokeBtn="$navTo('/order_edit',{order_id:item.id})"></wzh-btn>
						<wzh-btn v-if="!item.is_end" pattern="9" :text="$t('subscribe_record.retreat')" @invokeBtn="retreat(item.id)"></wzh-btn>
					</block>
				</view>
			</view>

			<!-- <view class="subscriptionCompany">
				<view class="subscriptionCompanyId">
					<view class="companyInformation">
						<view class="company">{{$t('company.xiaomi-tech')}}</view>
						<view class="information">
							<logo pattern="2" text="HK"></logo>
							<view class="serialNumber">01592</view>
						</view>
					</view>
					<view class="subscriptionStatus">{{$t('subscribe_record.opening')}}</view>
				</view>
				<view class="state">
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_2"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.btn-opening')}}</view>
							<view class="startSubscriptionTime">2021/02/07</view>
						</view>
						<view class="start_conduct">
							<view class="submitSubmit">
								{{$t('subscribe_record.submitted')}}
								200{{$t('shares')}}
								{{$t('subscribe_record.Order')}}
							</view>
							<view class="date">2021/02/08</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_2"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-closing')}}</view>
							<view class="startSubscriptionTime">2021/02/10</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_1"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.result-annc')}}</view>
							<view class="startSubscriptionTime">2021/02/12</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_1"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-listing')}}</view>
							<view class="startSubscriptionTime">2021/02/13</view>
						</view>
					</view>
				</view>
				<view class="bott">
					<wzh-btn pattern="4" :text="$t('subscribe_record.check-subs-details')"></wzh-btn>
				</view>
			</view> -->


			<!-- <view class="subscriptionCompany">
				<view class="subscriptionCompanyId">
					<view class="companyInformation">
						<view class="company">{{$t('company.xiaomi-tech')}}</view>
						<view class="information">
							<logo pattern="2" text="HK"></logo>
							<view class="serialNumber">01592</view>
						</view>
					</view>
					<view class="subscriptionStatus">{{$t('subscribe_record.btn-opening')}}</view>
				</view>
				<view class="state">
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_3"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.btn-opening')}}</view>
							<view class="startSubscriptionTime">2021/02/07</view>
						</view>
						<view class="start_conduct">
							<view class="submitSubmit">
								{{$t('subscribe_record.submitted')}}
								200{{$t('shares')}}
								{{$t('subscribe_record.Order')}}
							</view>
							<view class="date">2021/02/08</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_3"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-closing')}}</view>
							<view class="startSubscriptionTime">2021/02/10</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_3"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.result-annc')}}</view>
							<view class="startSubscriptionTime">2021/02/12</view>
						</view>
					</view>
					<view class="cardStatus">
						<view class="start">
							<view class="stepsBar">
								<view class="steps active_2"></view>
							</view>
							<view class="ctartSubscription">{{$t('subscribe_record.exp-listing')}}</view>
							<view class="startSubscriptionTime">2021/02/13</view>
						</view>
					</view>
				</view>
				<view class="bott">
					<wzh-btn pattern="4" :text="$t('subscribe_record.check-subs-details')"></wzh-btn>
				</view>
			</view> -->
		</view>
		
		<tooltips-msg ref="message" :closeBtn="true" ></tooltips-msg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardId: 3,
				stepNum: 0,
				type: 1,
				
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.$appLogin(()=>{
				this.getList()
			})
		},
		onReachBottom() {
			this.page++
		},
		methods: {
			selector(type) {
				if (this.type != type) {
					this.type = type
					this.list = []
					this.page = 1
					this.getList()
				}
			},
			getList(){
				this.$httpGet({
					// url: 'test/order_list',
					url: 'ipos/order_list',
					data: {
						page: this.page,
						type: this.type
					}
				}).then((res)=>{
					this.list = [...this.list, ...res.data.list]
				})
			},
			retreat(order_id){
				this.$refs.message.open(this.$t('subscribe_record.retreat_msg'), (res) => {
					if(res == true){
						this.$httpGet({
							// url: 'test/cancel_order',
							url: 'ipos/cancel_order',
							data: {
								order_id: order_id
							}
						}).then((res)=>{
							this.list = []
							this.page = 1
							this.getList()
						})
					}
				})	
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f7;
	}

	.toggleItem {
		border-width: 1rpx;
		border-color: #eeeeee;
		border-top-style: solid;
		background-color: #FFFFFF;
		.toggleItemInhalt {
			width: 695rpx;
			display: flex;
			margin: 0 auto;
			align-items: center;
			flex-flow: row nowrap;
			// justify-content: space-between;
			justify-content: space-around;
			.optionId {
				width: 180rpx;
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;

			}
			
			.Select {
				color: $main-color;
				border-bottom-style: solid;
				border-bottom-color: $main-color;
			}
		}
	}




	.subscriptionCompany {
		// width: 710rpx;
		// height: 706rpx;
		padding-bottom: 30rpx;
		margin: 0 20rpx;
		margin-top: 24rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.subscriptionCompanyId {
		// width: 660rpx;
		display: flex;
		padding: 20rpx;
		margin: 0 25rpx;
		border-width: 1rpx;
		align-items: center;
		flex-flow: row nowrap;
		border-color: #eeeeee;
		border-bottom-style: solid;
		justify-content: space-between;
	}

	.companyInformation {}

	.company {
		font-size: 35rpx;
		font-weight: 550;
	}

	.information {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	.serialNumber {
		color: #aaaaaa;
		font-size: 22rpx;
		margin-left: 10rpx;
	}

	.subscriptionStatus {
		min-width: 100rpx;
		height: 40rpx;
		color: #0877c6;
		font-size: 20rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #e7f5ff;
		padding: 0 10rpx;
	}

	.state {
		// width: 665rpx;
		height: 460rpx;
		margin: 0 25rpx;
		border-width: 1rpx;
		border-color: #eeeeee;
		border-bottom-style: solid;
	}

	.cardStatus {
		height: 128rpx;
	}

	.start {
		margin-top: 3rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		justify-content: space-between;

		.stepsBar {
			width: 111rpx;
			margin-top: 2rpx;

			.steps {
				width: 32rpx;
				height: 32rpx;
				margin: 0 auto;
				border-width: 3rpx;
				border-radius: 50%;
				border-style: solid;
				position: relative;
			}

			.steps::after {
				top: 40rpx;
				content: "";
				width: 4rpx;
				left: 15rpx;
				height: 80rpx;
				display: block;
				position: absolute;
				background-color: #cccccc;
			}

			.active_1 {
				border-width: 6rpx;
				margin: 0 auto;
				background-color: #FFFFFF;
				border-color: #cccccc;
			}

			.active_2 {
				border: solid 6rpx $main-color;
				color: $main-color;
			}

			.active_3 {
				border-width: 6rpx;
				border-color: $main-color;
				color: $main-color;
				background-color: $main-color;
			}

			.steps.active_1::after {
				background-color: transparent;
				background-size: 8px 7px;
				background-repeat: repeat-y;
				background-image: linear-gradient(to top, #ccc 0%, #ccc 50%, transparent 50%);
			}

			.steps.active_2::after {
				background-color: $main-color;
			}

			.steps.active_3::after {
				background-color: $main-color;
			}

		}
	}

	.cardStatus:last-child .steps::after {
		display: none;
	}

	.startTime_1 {
		width: 103rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.startTime_2 {
		width: 214rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.ctartSubscription {
		width: 322rpx;
		color: #333333;
		font-size: 28rpx;
		flex-grow: 1;
		margin-left: 20rpx;
	}

	.startSubscriptionTime {
		color: #999999;
		font-size: 28rpx;
	}

	.start_conduct {
		height: 70rpx;
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		justify-content: space-between;

		.progress {
			width: 111rpx;

			.progressBar {
				width: 4rpx;
				height: 80rpx;
				margin: 0 auto;
			}

			.activeStrip_1 {
				// height: 80rpx;
				border-color: #cccccc;
				background-size: 8px 7px;
				background-repeat: repeat-y;
				background-image: linear-gradient(to top, #ccc 0%, #ccc 50%, transparent 50%);
			}

			.activeStrip_2 {
				background-color: $main-color;
			}
		}
	}

	.subscriptionSubmissionTime {
		width: 100rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.submitSubmit {
		width: 322rpx;
		color: #333333;
		font-size: 24rpx;
		flex-grow: 1;
		margin-left: 130rpx;
	}

	.date {
		width: 170rpx;
		color: #999999;
		font-size: 28rpx;
	}

	.bott {
		width: 608rpx;
		display: flex;
		margin: 0 auto;
		padding-top: 25rpx;
		align-items: center;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
</style>
